<template>
	<view class="content">
		<view class="logo-bg-box">
			<view class="logo-bg-box-first">
				<view class="login-bg-item-top"></view>
				<view class="login-bg-item-bottom"></view>
			</view>
			<view class="logo-bg-box-second">
				<view class="login-bg-item-top"></view>
				<view class="login-bg-item-bottom"></view>
			</view>
		</view>
		<view class="logo-box">
			<image class="logo-item" src="@/static/images/logo@2x.png"></image>
			<!-- #ifdef APP-PLUS||H5 -->
			<button @tap="goLogin" class="logo-btn">
				<view class="weixin iconfont iconweix"></view>账号登陆
			</button>

			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<button class="logo-btn" @tap="getProfile">
				<view class="weixin iconfont iconweix"></view>微信授权
			</button>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<button class="logo-btn" @tap="getTtProfile">
				<view class="weixin iconfont iconweix"></view>微信授权
			</button>
			<!-- #endif -->
			<!-- #ifdef MP-QQ || MP-BAIDU-->
			<button class="logo-btn" @getuserinfo="getProfile" openType="getUserInfo">
				<view class="weixin iconfont iconweix"></view>授权登陆
			</button>
			<!-- #endif -->
			<view @tap="cancelLogin" class="cancel-login">暂不登录，返回首页</view>
			<view class="login-title-info">登录即代表您同意《用户协议》和《隐私政策》</view>
		</view>
		<u-popup v-model="show" mode="bottom" :closeable="true">
			<view class="login-form">
				<u-form ref="uForm" :label-style="labelStyle">
					<u-form-item label="账号 :">
						<u-input placeholder="请输入账号" v-model="username" />
					</u-form-item>
					<u-form-item label="密码 :">
						<u-input type="password" placeholder="请输入密码" v-model="password" />
					</u-form-item>
				</u-form>
				<button type="primary" @tap="login">登陆</button>
				<view class="links">
					<view @tap="gotoForgetPassword">忘记密码？</view>
					<view>|</view>
					<view class="link-highlight" @tap="gotoRegistration">注册账号</view>
				</view>
			</view>

		</u-popup>
		<u-popup v-model="passShow" mode="bottom" :closeable="true">
			<view class="login-form">
				<u-form ref="uForm" :label-style="labelStyle">
					<u-form-item label="邮箱 :">
						<u-input placeholder="请输入找回密码的邮箱" v-model="emails" />
					</u-form-item>
				</u-form>
				<button type="primary" @tap="getPassWords">找回密码</button>
				<view class="links">
					<view @tap="gotoForgetPassword">立即登陆</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="registShow" mode="bottom" :closeable="true">
			<view class="login-form">
				<u-form ref="uForm" :label-style="labelStyle">
					<u-form-item label="账号 :" label-width="120">
						<u-input placeholder="请输入账号" v-model="reusername" />
					</u-form-item>
					<u-form-item label="密码 :" label-width="120">
						<u-input type="password" placeholder="请输入密码" v-model="repassword" />
					</u-form-item>
				</u-form>
				<button type="primary" @tap="registra">注册</button>
				<!-- <view class="links">已有账号？<view class="link-highlight" @tap="gotoLogin">点此登陆</view>
				</view> -->
			</view>
		</u-popup>
	</view>

</template>

<script>
	import API from '@/api/api.js';
	import { ACCESS_TOKEN,USER_NAME,USER_INFO } from "@/common/util/constants"
	import { postRegister } from '@/api/user'
	import { mapActions } from "vuex"
	export default {
		data() {
			return {
				show: false,
				passShow: false,
				registShow: false,
				labelStyle: {
					color: "#434343",
				},
				codeBtn: {
					text: '获取验证码',
					waitingCode: false,
					count: this.seconds
				},
				username: '',
				password: '',
				emails: '',
				reemail: '',
				recode: '',
				reusername: '',
				repassword: '',
				disableCodeBtn: false,
				captchaImg: '',
				seconds: 60,
				loading:false

			}
		},
		methods: {
		   ...mapActions([ "mLogin","PhoneLogin","ThirdLogin" ]),
			goLogin: function() {
				this.show = true;
			},
			cancelLogin: function() {
				// uni.switchTab({
				// 	url: '../index/index'
				// })
				//this.$Router.pushTab({n})
				this.$Router.push({ name: 'index'})
			},
			gotoForgetPassword: function() {
				this.show = false;
				this.passShow = true;
			},
			gotoRegistration: function() {
				this.show = false;
				this.registShow = true;
			},
		
			login: function() {
				if(!this.username || this.username.length==0){
				      this.$tip.toast('请填写用户名');
				      return;
				    }
				    if(!this.password || this.password.length==0){
				       this.$tip.toast('请填写密码');
				      return;
				    }
				    let loginParams = {
				      username:this.username,
				      password:this.password
				    }
					this.loading=true;
				    this.mLogin(loginParams).then((res) => {
					  this.loading=false;
				      if(res.data.code ==0){
						  console.log(this.$Route); //这时你可以看到你在routes中所匹配的路由项
						  this.$tip.success('登录成功!')
						  // this.$Router.replaceAll({name:'index'})
						  uni.switchTab({
						  	url:'/pages/index/index'
						  })
						}else{
				          this.$tip.alert(res.data.message);
				        }
				    }).catch((err) => {
				      let msg = err.data.message || "请求出现错误，请稍后再试"
				      this.loading=false;
					  this.$tip.alert(msg);
				    }).finally(()=>{
					  this.loading=false;
				})
			},
			getPassWords: function() {
				let data = {
					login: this.emails,
				}
				API.getPassWord(data).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: '重置邮箱已发送'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.message
					})
				})
			},
			registra: function() {
				 if (this.repassword == '') {
					uni.showToast({
						title: '请输入密码'
					})
					return;
				} else if (this.reusername == '') {
					uni.showToast({
						title: '请输入用户名'
					})
					return;
				} else if (this.repassword.length < 6) {
					uni.showToast({
						title: '密码应大于6位'
					})
					return;
				} else {
					
					let data = {
						username: this.reusername,
						password: this.repassword,
					}
					postRegister(data).then(res=>{
							console.log(res);
							uni.showToast({
								title: '注册成功',
							})
							
					})
					
					// API.getRegistra(data).then(res => {
					// 	console.log(res);
					// 	uni.showToast({
					// 		title: '注册成功',
					// 	})
					// 	API.storageUser(res);
					// 	if (this.isDetail) {
					// 		uni.navigateBack({
					// 			delta: 1,
					// 		})
					// 	} else {
					// 		uni.switchTab({
					// 			url: '/pages/mine/mine'
					// 		})
					// 	}
					// }).catch(err => {
					// 	uni.showToast({
					// 		title: err.message
					// 	})
					// })
				}

			},
			isemail: function(text) {
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				return reg.test(text);
			},
			sendCode: function() {
				if (this.reemail == '' || !this.isemail(this.reemail)) {
					uni.showToast({
						title: '请输入正确的邮箱'
					})
					return;
				}

				if (this.codeBtn.waitingCode == false) {
					API.getEmailCode({
						email: this.reemail
					}).then(res => {
						console.log(res);
						if (res.status === 200) {
							uni.showToast({
								title: "验证码已发送"
							})
						}
					})
				}
				this.disableCodeBtn = true;
				this.codeBtn.waitingCode = true;
				this.codeBtn.count = this.seconds;
				this.codeBtn.text = this.codeBtn.count + 's';
				let countdown = setInterval(() => {
					this.codeBtn.count--;
					this.codeBtn.text = this.codeBtn.count + 's';
					if (this.codeBtn.count < 0) {
						clearInterval(countdown);
						this.codeBtn.text = '重新发送';
						this.codeBtn.waitingCode = false;
						this.disableCodeBtn = false;
					}
				}, 1000);
			},

			getTtProfile: function(e) {
				uni.showLoading({
					title: '正在登录...',
				})
				API.getTtProfile().then(res => {
						//console.log(res)
						if (this.isDetail) {
							uni.navigateBack({
								delta: 1,
							})
						} else {
							uni.switchTab({
								url: '/pages/mine/mine'
							})
						}
						tt.hideLoading()
					})
					.catch(err => {
						console.log(err)
						tt.hideLoading()
					})
			},


			getProfile: function(e) {
				uni.showLoading({
					title: '正在登录!',
					mask: true
				})
				// #ifdef MP-WEIXIN
				API.getProfiles().then(res => {
						if (this.isDetail) {
							uni.navigateBack({
								delta: 1,
							})
						} else {
							uni.switchTab({
								url: '/pages/mine/mine'
							})
						}

						uni.hideLoading()
					})
					.catch(err => {
						console.log(err)
						uni.hideLoading()
					})
				// #endif
				// #ifdef MP-BAIDU || MP-QQ
				API.getUserInfos(e).then(res => {
						if (this.isDetail) {
							uni.navigateBack({
								delta: 1,
							})
						} else {
							uni.switchTab({
								url: '/pages/mine/mine'
							})
						}

						uni.hideLoading()
					})
					.catch(err => {
						console.log(err)
						uni.hideLoading()
					})
				// #endif

			},
		}
	}
</script>

<style lang="scss" scoped>
	$color-primary: #49b44a;

	.content {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background-color: #000;
	}

	.logo-bg-box {
		width: 100%;
		height: 9482rpx;
		opacity: .5;
		animation: move 60s linear infinite;

		.logo-bg-box-first,
		.logo-bg-box-second {
			width: 100%;
			height: 50%;
		}

		.login-bg-item-top {
			width: 100%;
			height: 50%;
			background: url(https://www.hualigs.cn/image/61371a7e2cf68.jpg);
			background-size: 100% 100%;
		}

		.login-bg-item-bottom {
			width: 100%;
			height: 50%;
			background: url(https://www.hualigs.cn/image/61371b501341c.jpg);
			background-size: 100% 100%;
		}

		@-webkit-keyframes move {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(-4741rpx);
			}
		}

		@keyframes move {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(-4741rpx);
			}
		}

	}

	.img-captcha {
		width: 150upx;
		height: 60upx;
	}

	button[type="primary"] {
		background-color: $color-primary;
		border-radius: 0;
		font-size: 34upx;
		margin-top: 60upx;
	}

	.logo-box {
		padding-top: 115rpx;
		position: fixed;
		top: 35%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;

		.logo-item {
			display: block;
			width: 400rpx;
			height: 66rpx;
			margin: 0 auto 120rpx;
		}

		.logo-btn {
			width: 418rpx;
			height: 88rpx;
			background-color: #fff;
			box-shadow: 0 2rpx 16rpx 0 rgba(0, 0, 0, .08);
			border-radius: 88rpx;
			font-size: 28rpx;
			line-height: 88rpx;
			color: #93b1b1;
			display: flex;
			-webkit-box-align: center;
			align-items: center;
			-webkit-box-pack: center;
			justify-content: center;

			.iconfont {
				font-size: 40rpx;
				margin-right: 20rpx;
			}

			.weixin {
				width: 10rpx;
				height: 10rpx;
				padding-left: 2rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				border-radius: 50%;
				margin-right: 10rpx;
				color: #fff;
				background-color: #49b44a;
			}
		}

		.cancel-login {
			font-size: 28rpx;
			height: 60rpx;
			line-height: 60rpx;
			color: #fff;
			text-align: center;
			margin-top: 20rpx;
			z-index: 5;
		}

		.login-title-info {
			font-size: 20rpx;
			color: #fff;
			width: 500rpx;
			margin-top: 100rpx;
			text-align: center;
		}
	}

	.login-form {
		padding: 40rpx;

		.codebutton {
			font-size: 24upx;
			margin: 0;
			width: 180upx;
			text-align: center;

			&:after {
				border: none
			}

			&.active {
				background-color: $color-primary;
				color: $uni-text-color-inverse;
			}
		}

	}

	button[type="primary"] {
		background-color: $color-primary;
		border-radius: 0;
		font-size: 34upx;
		margin-top: 60upx;
	}

	.links {
		text-align: center;
		margin-top: 40upx;
		font-size: 26upx;
		color: #434343;

		view {
			display: inline-block;
			vertical-align: top;
			margin: 0 10upx;
		}

		.link-highlight {
			color: #434343;
		}
	}
</style>
